<template>
  <uni-popup ref="popupRef" :is-mask-click="isMaskClick" :mask-click="isMaskClick">
    <view class="content">
      <view class="header">
        <view class="header-title">{{ detail.staffName }}的归属门店</view>
      </view>
      <view class="body">
        <view class="scroll-item" v-for="item in detail.siteInfoList" :key="item">{{ item }}</view>
      </view>

      <view class="footer">
        <ve-button class="footer-btn" type="link" @click="onClose"> 关闭 </ve-button>
      </view>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
  import { ref } from 'vue'

  defineProps({
    isMaskClick: {
      type: Boolean,
      default: true,
    },
  })

  const popupRef = ref()
  const detail = ref<any>({})

  const open = (record: any) => {
    console.log(record)
    detail.value = record
    popupRef.value.open('center')
  }

  const onClose = () => {
    popupRef.value.close()
  }

  defineExpose({
    open,
  })
</script>

<style lang="less" scoped>
  .content {
    width: 351px;
    padding: 12px 16px 0 16px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: inset 0px 0px 0px 0px #e5e6eb;

    .header {
      display: flex;
      justify-content: center;
      align-items: center;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(216, 216, 216, 0.3);
      margin-bottom: 8px;
      .header-title {
        font-size: 17px;
        color: #1d2129;
        font-weight: 500;
      }
    }

    .body {
      max-height: 180px;
      overflow: hidden;
      overflow-y: auto;

      .scroll-item {
        font-weight: 400;
        font-size: 15px;
        color: #191c27;
        padding: 12px 0;
        word-wrap: break-word;
        word-break: break-all;
        border-bottom: 1px solid rgba(216, 216, 216, 0.3);
      }
    }
    .footer {
      display: flex;
      justify-content: space-between;
      border-top: 1px solid rgba(216, 216, 216, 0.3);

      .footer-btn {
        flex: 1;
        font-size: 12px;
        height: 40px;
      }
    }
  }
</style>
